<template>
	<div id="resvationData">
		<div class="breadcrumb">
			<img src="../../../../static/img/appoinment_1.png" class="head_img">
			<span class="title" @click="goTest()">体测预约</span>/
			<span class="title_1" @click="cancel()">场次列表</span>/ 预约数据
			<el-button size="small" type="text" @click="toTestData" class="top_btn_1">体测数据</el-button>
			<el-button size="small" type="text" @click="toStandards" class="top_btn">体测标准</el-button>
		</div>
		<div id="qrcode">
			<div id="userName">{{teacherName}}</div>
		</div>
		<div class="list">
			<div class="list_head">
				<span class="head_name">预约数据</span>
				<el-button class="downloadimg" type="primary" @click="downloadQrcode()">下载二维码</el-button>
				<el-button class="import" type="primary" @click="exportStu()">导入学生</el-button>
				<el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
			</div>
			<div class="attendInfo">
				<span class="physical-name">{{physicalName}} -- {{testName}}</span>
				<span>测试时间：{{startTime}} - {{endTime}}</span>
				<span>测试教师：{{teacherName}}</span>
				<span>已预约学生：{{totalOrdered}}人（男：{{maleCount}}人，女：{{femaleCount}}人）</span>
			</div>

			<el-table :data="dataList" style="width:100%">
				<el-table-column prop="campusId" label="学号">
				</el-table-column>
				<el-table-column prop="name" label="姓名">
				</el-table-column>
				<el-table-column label="性别">
					<template scope="scope">
						<span v-if="scope.row.gender == 1">男生</span>
						<span v-if="scope.row.gender == 0">女生</span>
					</template>
				</el-table-column>
				<el-table-column prop="grade" label="年级">
				</el-table-column>
				<el-table-column prop="departmentName" label="院系">
				</el-table-column>
				<el-table-column prop="gradeClassName" label="班级">
				</el-table-column>
				<el-table-column prop="value" label="成绩">
				</el-table-column>
				<el-table-column align="right">
					<template scope="scope">
						<el-button size="small" type="text" @click="delStudent(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="pageNum" :total="totalCount"
				 @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";
	import QRCode from 'qrcodejs2'
	export default {
		data() {
			return {
				teacherName: this.$util.getUrlParam("teacherName") || '',
				url: this.$util.qcodeurl,
				dataList: [],
				itemId: this.$util.getUrlParam("itemId") || "",
				physicalTestId: this.$util.getUrlParam("physicalTestId") || "",
				maleCount: 0,
				femaleCount: 0,
				totalOrdered: 0,
				startTime: '',
				endTime: '',
				physicalName: this.$util.getUrlParam("physicalName") || "",
				testName: this.$util.getUrlParam("testName") || "",
				totalCount: 0,
				pageNum: 1
			};
		},
		mounted() {
			switch (this.$util.domain) {
				case '/api_185':
					this.url = 'http://h5.gxapp.iydsj.com/gxapp-test/physicaltest/index.html?fieldId=';
					break;
				case '/api_187':
					this.url = 'http://h5.gxapp.iydsj.com/gxapp-pre/physicaltest/index.html?fieldId='
					break;
				default:
					this.url = 'https://gxapp-h5.oss-cn-shanghai.aliyuncs.com/gxapp/physicaltest/index.html?fieldId='
					break;
			}
			this.getDataList();
			this.qrcode(this.url + this.itemId);
			this.getFiledDetail();
		},
		computed: mapState({ user: state => state.user }),
		methods: {

			//获取预约数据
			getDataList() {
				this.dataList = [];
				let url = this.$util.domain + "/physicaltest/appointmentlistbytest";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						itemId: this.itemId * 1,
						pageSize: 10,
						pageNum: this.pageNum * 1
					})
				}).then(response => {
					if (response.data.error == 10000) {
						let dataList = response.data.data.list;
						this.totalCount = response.data.data.totalCount;

						if (dataList && dataList.length > 0) {
							for (let i = 0; i < dataList.length; i++) {
								let $campusId = dataList[i].campusId,
									$name = dataList[i].name,
									$gender = dataList[i].gender,
									$grade = dataList[i].grade + "级",
									$uid = dataList[i].uid,
									$value = dataList[i].value,
									$departmentName = dataList[i].departmentName,
									$gradeClassName = dataList[i].gradeClassName;

								let $obj = {
									uid: $uid,
									name: $name,
									grade: $grade,
									value: $value,
									gender: $gender,
									campusId: $campusId,
									departmentName: $departmentName,
									gradeClassName: $gradeClassName
								};

								this.dataList.push($obj);
							}
						}
					}
				});
			},

			// 获取场次统计信息
			getFiledDetail() {
				let url = this.$util.domain + "/api/v24/physical/getFieldStatisticsInfo";

				this.$http({
					url,
					method: "GET",
					params: {
						fieldId: this.itemId * 1
					}
				}).then(response => {
					if (response.data.error == 10000) {
						let resObj = response.data.data;
						if (resObj) {
							this.teacherName = resObj.teacherName;
							this.femaleCount = resObj.femaleCount;
							this.maleCount = resObj.maleCount;
							this.totalOrdered = resObj.femaleCount * 1 + resObj.maleCount * 1;
							this.startTime = new Date(resObj.startTime).format("yyyy/MM/dd hh:mm");
							this.endTime = new Date(resObj.endTime).format("hh:mm");
						}

					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},

			//下载二维码图片
			downloadQrcode() {
				let that = this;
				let canvas = document.getElementById('qrcode');
				html2canvas(canvas, {
					onrendered: function (can) {
						that.download(can.toDataURL("image/png"));
					},
					width: 500,
					height: 500
				})
			},
			download(src) {
				var $a = document.createElement('a');
				$a.setAttribute("href", src);
				$a.setAttribute("download", this.teacherName);
				var evObj = document.createEvent('MouseEvents');
				evObj.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
				$a.dispatchEvent(evObj);
			},
			qrcode(url) {
				let qrcode = new QRCode('qrcode', {
					width: 500,
					height: 500, // 高度  
					text: url // 二维码内容  
					// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
					// background: '#f0f'  
					// foreground: '#ff0'
				})
			},
			delStudent(row) {
				if (row.value) {
					this.$alert("该学生已有成绩录入，无法删除！", "删除预约信息", {
						confirmButtonText: '确定'
					});
					return;
				}
				this.$confirm("您确定要删除 " + row.name + " " + (row.gender == 0 ? "女 " : "男 ") + row.campusId + " 的预约吗？", "删除预约信息", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					let url = this.$util.domain + "/api/v24/physical/deleteStudent";

					this.$http({
						url,
						method: "GET",
						params: {
							fieldId: this.itemId * 1,
							uid: row.uid
						}
					}).then(response => {
						if (response.data.error == 10000) {
							this.$util.successMsg("删除成功");
							this.getDataList();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				})

			},

			// 导入学生
			exportStu() {
				let params = {
					physicalTestId: this.physicalTestId,
					physicalName: this.physicalName,
					itemId: this.itemId,
					testName: this.testName,
					gender: this.$util.getUrlParam('gender') || ''
				}
				this.$util.refreshTo("/#/importStudent", params);
			},

			//导出数据
			importData() {
				let url = this.$util.domain + "/physicaltest/appointmentDataExport";

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						itemId: this.itemId * 1
					})
				}).then(response => {
					if (response.data.error == 10000) {
						if (response.data.data) {
							location.href = response.data.data;
						} else {
							this.$util.errorMsg(response.data.message);
						}
					}
				});
			},
			handleCurrentChange(val) {
				this.pageNum = val;
				this.getDataList();
			},
			cancel() {
				location.href = `/#/importFile?physicalTestId=${this.physicalTestId}&physicalName=${this.physicalName}`;
			},
			goTest() {
				location.href = "/#/history";
			},
			toStandards() {
				location.href = "/#/standards";
			},
			toTestData() {
				location.href = "/#/dataStatistics";
			}
		}
	};
</script>

<style scoped>
	#resvationData {
		padding-top: 80px;
		height: calc(100% - 100px);
		background-color: #fff;
	}

	.title {
		color: #0398ff;
	}

	.title_1 {
		color: #0398ff;
		margin-right: 5px;
	}

	.downloadimg {
		position: absolute;
		right: 170px;
		border-radius: 0;
	}

	.import {
		position: absolute;
		right: 70px;
		border-radius: 0;
	}

	.attendInfo {
		padding: 10px;
		margin-bottom: 10px;
		font-size: 14px;
	}

	.attendInfo span {
		padding-right: 20px;
		color: #333744;
		font-size: 13px;
	}

	.export {
		position: absolute;
		right: 170px;
	}

	.importModel {
		position: absolute;
		right: 270px;
	}

	#qrcode {
		position: relative;
		width: 1px;
		height: 1px;
		z-index: -110;
	}

	#userName {
		position: absolute;
		width: 80px;
		height: 60px;
		top: 220px;
		right: 0;
		bottom: 0;
		left: 210px;
		background-color: #fff;
		line-height: 60px;
		text-align: center;
	}

	#resvationData .physical-name {
		font-size: 16px;
	}
</style>